<template>
	<view class="container">
		<!-- 1. 用户信息区 -->
		<view class="user-info-card card" v-if="userInfo">
			<view class="basic-info">
				<image class="avatar" :src="userInfo.avatarUrl || '/static/logo.png'" @click="editAvatar"></image>
				<view class="name-id">
					<text class="nickname">{{ userInfo.nickname }}</text>
					<text class="user-id">ID: {{ userInfo.id }}</text>
				</view>
				<view class="level-badge" v-if="userInfo.level">
					<text>Lv.{{ userInfo.level }}</text>
					<!-- 可以放勋章图标 -->
				</view>
			</view>
			<view class="signature">
				<text>{{ userInfo.signature || '这个人很懒，什么都没留下~' }}</text>
			</view>
			<view class="follow-info">
				<view class="follow-item" @click="gotoFollowList('following')">
					<text class="count">{{ formatCount(userInfo.followingCount) }}</text>
					<text class="label">关注</text>
				</view>
				<view class="follow-item" @click="gotoFollowList('followers')">
					<text class="count">{{ formatCount(userInfo.followersCount) }}</text>
					<text class="label">粉丝</text>
				</view>
			</view>
		</view>
        <!-- 加载状态 -->
        <view class="loading-placeholder card" v-else>
            <text>用户信息加载中...</text>
        </view>

		<!-- 2. 账户相关 -->
		<view class="account-card card" v-if="accountInfo">
			<view class="account-item" @click="gotoWallet">
				<uni-icons type="wallet-filled" size="20"></uni-icons>
				<text>我的钱包</text>
				<text class="balance">¥ {{ accountInfo.balance.toFixed(2) }}</text>
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>
			<view class="account-item" @click="gotoVip">
				<uni-icons type="vip-filled" size="20"></uni-icons>
				<text>会员中心</text>
				<text class="status" :class="{ 'vip-active': accountInfo.isVip }">{{ accountInfo.isVip ? '已开通' : '未开通' }}</text>
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>
			<view class="account-item" @click="gotoCoupons">
				<uni-icons type="gift-filled" size="20"></uni-icons>
				<text>优惠礼包</text>
                <text class="count-badge" v-if="accountInfo.couponCount > 0">{{ accountInfo.couponCount }}</text>
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>
		</view>

		<!-- 3. 核心功能入口 (直播相关) -->
		<view class="live-features-card card">
			<view class="section-title">直播中心</view>
			<view class="feature-grid">
				<!-- 主播入口，可以根据 userInfo.isStreamer 判断是否显示 -->
                <view class="feature-item" v-if="userInfo && userInfo.isStreamer" @click="gotoMyLiveRoom">
					<uni-icons type="videocam-filled" size="24"></uni-icons>
					<text>我的直播间</text>
				</view>
				<view class="feature-item" @click="gotoReplays">
					<uni-icons type="refreshempty" size="24"></uni-icons>
					<text>直播回放</text>
				</view>
				<view class="feature-item" @click="gotoAppointments">
					<uni-icons type="calendar-filled" size="24"></uni-icons>
					<text>直播预约</text>
				</view>
				<view class="feature-item" @click="gotoMyGifts">
					<uni-icons type="pyq" size="24"></uni-icons> <!-- 暂用朋友圈图标代替 -->
					<text>我的礼物</text>
				</view>
			</view>
		</view>


		<!-- 5. 工具与设置 -->
		<view class="tools-settings-card card">
             <view class="section-title">工具与设置</view>
			<view class="tools-list">
                <view class="tool-item" @click="gotoTaskCenter">
					<uni-icons type="list" size="20"></uni-icons>
					<text>任务中心</text>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
                <view class="tool-item" @click="gotoActivityCenter">
					<uni-icons type="flag-filled" size="20"></uni-icons>
					<text>活动中心</text>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
                 <!-- 主播专用数据统计 -->
                 <view class="tool-item" v-if="userInfo && userInfo.isStreamer" @click="gotoLiveStats">
					<uni-icons type="tune-filled" size="20"></uni-icons>
					<text>直播数据</text>
                    <!-- <text class="note">(主播)</text> -->
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
				<view class="tool-item" @click="gotoSettings">
					<uni-icons type="gear-filled" size="20"></uni-icons>
					<text>设置</text>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
                <view class="tool-item" @click="gotoHelp">
					<uni-icons type="help-filled" size="20"></uni-icons>
					<text>帮助与反馈</text>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
                 <view class="tool-item" @click="gotoAbout">
					<uni-icons type="info-filled" size="20"></uni-icons>
					<text>关于我们</text>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: null, // 初始化为null，表示正在加载或未获取
                accountInfo: null, // 初始化为null
			};
		},
        onLoad() {
            // 页面加载时获取用户信息和账户信息
            this.fetchUserInfo();
            this.fetchAccountInfo();
        },
		methods: {
            // --- 数据获取 ---
            fetchUserInfo() {
                // 模拟异步获取用户信息
                setTimeout(() => {
                    this.userInfo = {
                        id: '12345678',
                        nickname: 'AI主播助手',
                        avatarUrl: '/static/avatar_placeholder.png', // 准备一个占位头像
                        level: 15,
                        signature: '探索无限可能，直播AI新视界！',
                        followingCount: 156,
                        followersCount: 12850,
                        isStreamer: true // 假设是主播
                    };
                }, 500); // 模拟网络延迟
            },
            fetchAccountInfo() {
                 // 模拟异步获取账户信息
                setTimeout(() => {
                    this.accountInfo = {
                        balance: 188.50,
                        isVip: true,
                        couponCount: 3
                    };
                }, 600); // 模拟网络延迟
            },

            // --- 辅助函数 ---
            formatCount(count) {
                if (count >= 10000) {
                    return (count / 10000).toFixed(1) + 'w';
                } else if (count >= 1000) {
                    return (count / 1000).toFixed(1) + 'k';
                }
                return count;
            },

            // --- 事件处理与跳转 ---
			editAvatar() {
				console.log('编辑头像');
				uni.chooseImage({
                    count: 1,
                    sizeType: ['compressed'],
                    sourceType: ['album', 'camera'],
                    success: (res) => {
                        const tempFilePath = res.tempFilePaths[0];
                        console.log('选择的图片:', tempFilePath);
                        // TODO: 调用上传接口，成功后更新 userInfo.avatarUrl
                        uni.showToast({ title: '上传头像（模拟）', icon: 'none' });
                    }
                });
			},
			gotoFollowList(type) {
				console.log('查看列表:', type);
                // 实际跳转需要创建对应页面 pages/followList/followList
				uni.navigateTo({ url: `/pages/followList/followList?type=${type}&userId=${this.userInfo.id}` });
			},
			gotoWallet() {
                console.log('跳转到钱包');
                uni.navigateTo({ url: '/pages/wallet/wallet' }); // 需创建 pages/wallet/wallet.vue
            },
			gotoVip() {
                console.log('跳转到VIP');
                 uni.navigateTo({ url: '/pages/my/vip/vip' }); // 需创建 pages/vip/vip.vue
            },
			gotoCoupons() {
                console.log('跳转到优惠券');
                uni.navigateTo({ url: '/pages/coupons/coupons' }); // 需创建 pages/coupons/coupons.vue
            },
			gotoMyLiveRoom() {
                console.log('跳转到我的直播间');
                // 可能跳转到开播设置页或直接进入直播预览
                uni.navigateTo({ url: '/pages/myLiveRoom/myLiveRoom' }); // 需创建 pages/myLiveRoom/myLiveRoom.vue
            },
			gotoReplays() {
                console.log('跳转到直播回放');
                uni.navigateTo({ url: '/pages/replays/replays' }); // 需创建 pages/replays/replays.vue
            },
			gotoAppointments() {
                console.log('跳转到直播预约');
                uni.navigateTo({ url: '/pages/appointments/appointments' }); // 需创建 pages/appointments/appointments.vue
            },
			gotoMyGifts() {
                console.log('跳转到我的礼物');
                uni.navigateTo({ url: '/pages/myGifts/myGifts' }); // 需创建 pages/myGifts/myGifts.vue
            },
            
            gotoTaskCenter() {
                console.log('跳转到任务中心');
                uni.navigateTo({ url: '/pages/taskCenter/taskCenter' }); // 需创建 pages/taskCenter/taskCenter.vue
            },
            gotoActivityCenter() {
                console.log('跳转到活动中心');
                uni.navigateTo({ url: '/pages/activityCenter/activityCenter' }); // 需创建 pages/activityCenter/activityCenter.vue
            },
            gotoLiveStats() {
                console.log('跳转到直播数据');
                uni.navigateTo({ url: '/pages/liveStats/liveStats' }); // 需创建 pages/liveStats/liveStats.vue
            },
			gotoSettings() {
                console.log('跳转到设置');
                uni.navigateTo({ url: '/pages/settings/settings' }); // 需创建 pages/settings/settings.vue
            },
            gotoHelp() {
                console.log('跳转到帮助反馈');
                uni.navigateTo({ url: '/pages/help/help' }); // 需创建 pages/help/help.vue
            },
            gotoAbout() {
                console.log('跳转到关于我们');
                uni.navigateTo({ url: '/pages/about/about' }); // 需创建 pages/about/about.vue
            }
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		background-color: #f4f4f4;
		padding: 20rpx;
        padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
        padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
        min-height: 100vh; // 确保内容不足时背景也能撑满
        box-sizing: border-box; // padding包含在内
	}

	.card {
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

    .loading-placeholder {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200rpx; // 给个初始高度
        color: #999;
        font-size: 28rpx;
    }

    .section-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 25rpx;
        padding-left: 10rpx; // 稍微缩进
        border-left: 6rpx solid $uni-color-primary; // 左侧加个强调线
    }

	/* 1. 用户信息区 */
	.user-info-card {
		.basic-info {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-right: 25rpx;
				background-color: #eee; // 占位背景
                border: 2rpx solid #fff; // 加个白边好看点
                box-shadow: 0 2rpx 5rpx rgba(0,0,0,0.1);
			}

			.name-id {
				flex: 1;
				display: flex;
				flex-direction: column;

				.nickname {
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 8rpx;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
				}
				.user-id {
					font-size: 24rpx;
					color: #999;
				}
			}

			.level-badge {
				font-size: 24rpx;
				color: #ff8c00;
				background-color: #fff3e0;
				padding: 4rpx 12rpx;
				border-radius: 20rpx;
                margin-left: 15rpx;
                white-space: nowrap; // 防止等级过长换行
			}
		}

		.signature {
			font-size: 26rpx;
			color: #666;
			margin-bottom: 30rpx;
            padding-left: 145rpx; // 与头像对齐
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
		}

		.follow-info {
			display: flex;
            justify-content: flex-start;
            padding-left: 145rpx; // 与头像对齐
            gap: 60rpx; // 设置固定间距

			.follow-item {
				display: flex;
                align-items: baseline; // 数字和文字基线对齐
				cursor: pointer;

				.count {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
                    margin-right: 8rpx; // 数字和标签间加点间距
				}
				.label {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}

	/* 2. 账户相关 */
	.account-card {
		.account-item {
			display: flex;
			align-items: center;
			padding: 25rpx 0;
			font-size: 28rpx;
			color: #333;
            cursor: pointer;

            &:not(:last-child) {
                 border-bottom: 1rpx solid #f5f5f5;
            }

			uni-icons:first-child {
				margin-right: 20rpx;
                color: $uni-color-primary; // 使用主题色
			}
            text:nth-of-type(1) { // 文本标签
                flex: 1;
            }
			.balance, .status, .count-badge {
				font-size: 26rpx;
				color: #999;
				margin-right: 10rpx;
			}
            .status {
                color: #999; // 默认未开通颜色
                &.vip-active { // VIP激活状态
                     color: #ff8c00; // VIP状态用醒目颜色
                     font-weight: bold;
                }
            }
            .count-badge {
                background-color: $uni-color-error;
                color: #fff;
                font-size: 20rpx;
                padding: 2rpx 10rpx;
                border-radius: 20rpx;
                line-height: 1;
            }
		}
	}

    /* 3. 核心功能入口 */
    .live-features-card {
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr); // 每行4个
            gap: 30rpx 10rpx; // 垂直间距30，水平间距10

            .feature-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 24rpx;
                color: #555;
                cursor: pointer;
                padding: 15rpx 0; // 增加点击区域

                uni-icons {
                    margin-bottom: 10rpx;
                    color: $uni-color-primary;
                }
                text {
                    white-space: nowrap; // 防止文字换行
                }
            }
        }
    }

    /* 4. 互动内容 */
    .interaction-card {
        .interaction-list {
            .interaction-item {
                display: flex;
                align-items: center;
                padding: 25rpx 0;
                font-size: 28rpx;
                color: #333;
                cursor: pointer;

                 &:not(:last-child) {
                     border-bottom: 1rpx solid #f5f5f5;
                 }

                uni-icons:first-child {
                    margin-right: 20rpx;
                    color: #666; // 图标颜色
                }
                text {
                    flex: 1;
                }
            }
        }
    }

    /* 5. 工具与设置 */
    .tools-settings-card {
         .tools-list {
            .tool-item {
                display: flex;
                align-items: center;
                padding: 25rpx 0;
                font-size: 28rpx;
                color: #333;
                cursor: pointer;

                 &:not(:last-child) {
                     border-bottom: 1rpx solid #f5f5f5;
                 }

                uni-icons:first-child {
                    margin-right: 20rpx;
                    color: #666;
                }
                text:nth-of-type(1) {
                    flex: 1;
                }
                .note {
                    font-size: 24rpx;
                    color: #999;
                    margin-right: 10rpx;
                }
            }
        }
    }

</style> 